test: initial test setup and tests #26
Conversation
Add vitest, jsdom and Testing Library as dev dependencies and a `test` block in vite.config.ts (jsdom environment, setup file, mock reset and readable CSS module class names in snapshots). src/test/setup.ts registers the jest-dom matchers and cleans up the DOM and localStorage after each test. src/test/renderWithQueryClient.tsx renders components inside a QueryClientProvider, and src/test/fixtures/books.ts holds sample books for component tests. New scripts: `pnpm test` (run once) and `pnpm test:watch`. Refs #24 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
- toBook: mapping from an Open Library doc to Book, including fallbacks for missing author, year and cover. - searchBooks: mocks the global fetch with vi.spyOn so no request reaches openlibrary.org, checks the query parameters and the error handling. - useBooks: mocks searchBooks with vi.mock and checks that the hook returns mapped books. Refs #24 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Component tests (props, state and user interaction): - BookCard: shows book data, calls onBookSelect when clicked - BookCover: image with alt text, or placeholder without cover - BookDetails: shows book data, calls onGoBack - FavoriteButton: toggles aria-pressed and favorites in localStorage - BookGrid: loading, error and empty states with a mocked searchBooks - App: selecting a book opens details, going back reuses cached data Snapshot tests for BookCard, Header and Footer. Refs #24 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Explain how to run the tests, what is covered by unit, component, snapshot and integration tests, how requests to Open Library are mocked, and which browsers and screen sizes the app has been checked in so far. Refs #24 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Resolve the conflict in vite.config.ts by keeping both the base URL and CSS module options from main and the Vitest configuration. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
- useBooks now returns { numFound, books }; assert on that shape.
- BookGrid requires page and onPageChange; add tests for the page count
and for clicking Next.
- Add component tests for Pagination (page info, disabled buttons,
onPageChange and scroll to top).
- searchBooks: test the new lang, page, sort and limit parameters.
- README: list Pagination under component tests.
Refs #24
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
These tests were generated by AI. Nothing is wrong with them, but having tests just to get coverage is not necessary and takes the focus away from the things we should be testing: logic, state and how the parts work together. Removed the Header and Footer snapshot tests, the BookCover test and the useBooks hook test.
BookDetails uses useBookDescription, so its tests render inside a QueryClientProvider and mock fetchWork with workResponse.json. The "shows title" test is replaced by one that checks the description loads. App.test.tsx mocks fetchWork too. Before this the flow test sent a real request to openlibrary.org in the background and still passed. Also remove the "2 of 5" Pagination test and the unused bookWithoutCover fixture, and write down in README what we test and why. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
|
I removed some of the initial tests that were AI generated (89f098f). Nothing wrong with the tests as the described in the commit as well, but they did not bring any real value. It took some time to understand this PR, i haven't worked with tests using vite and react before, but i feel like I have a good understanding now. If you want to learn how it works, i would recommend going into openLibrary.test.tsx file and look at the different tests there. My biggest issue was understanding how this "spy" worked, and why it allowed us to make calls to searchBooks and fetchWork without a network requests: Once you understand that, the rest of the testing follows normal testing principles, and is fairly straight forward. So looking at the openLibrary.test.tsx makes you understand how testing the api layer works, and if you want to learn how to test components, i recommend going into either SearchBar.test.tsx, or Pagination.test.tsx. I wrote SearchBar.test.tsx myself to get a feeling on how testing components work (there is a few different user event types that is good to know about). |
|
@hestro Some changes were needed because of the new props for the components |
SearchBar now requires onFilterChange, which made `pnpm build` fail even though the tests passed (Vitest does not type-check). setup.ts also clears sessionStorage between tests, since App reads the filters from there on mount. README: BookGrid no longer mocks searchBooks; its tests pass a fake query result in as a prop. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
|
Two more commits after merging main:
Lesson for the rest of us: run This comment was generated by Claude Code ^ |
AI generated tests. Will review myself tomorrow.
One thing i noticed straight away was the placement of the tests, which is different than i'm used to, but apparently that's fairly normal practice in React and Vite projects.
--
Update:
I have now reviewed, look comment below
Closes #24